<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            /*边框宽度、样式和颜色*/
            border: 10px solid yellow;
        }


        #box2 {
            padding: 100px;
            background-color: #bfa;
        }

        #box4 {
            width: 200px;
            height: 300px;
            background-color: #bfa;
            /*box5高度溢出，出现滚动条*/
            overflow: auto;
        }

        #box5 {
            width: 100px;
            height: 600px;
            background-color: yellow;
        }

    </style>
    <script type="text/javascript">

        /**
         * Element 是最通用的基类，Document 中的所有元素对象（即表示元素的对象）都继承自它。它只具有各种元素共有的方法和属性。更具体的类则继承自 Element。
         * 元素对象的其他实例属性
         */
        window.onload = function () {
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            var box4 = document.getElementById("box4");

            btn01.onclick = function () {
                /*
                 * clientWidth、clientHeight
                 * 	- 这两个属性可以获取元素的可见宽度和高度
                 * 	- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
                 * 	- 会获取元素宽度和高度，包括内容区和内边距
                 *  - 这些属性都是只读的，不能修改
                 */
                //alert(box1.clientWidth);
                //alert(box1.clientHeight);
                ////box1.clientHeight = 300;

                /*
                 * offsetWidth、offsetHeight
                 * 	- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
                 */
                //alert(box1.offsetWidth);
                //alert(box1.offsetHeight);

                /*
                 * offsetParent
                 * 	- 可以用来获取当前元素的定位父元素
                 *  - 会获取到离当前元素最近的开启了定位的祖先元素
                 * 	如果所有的祖先元素都没有开启定位，则返回body
                 */
                var op = box1.offsetParent;
                alert(op.id);

                /*
                 * offsetLeft
                 * 	- 当前元素相对于其定位父元素的水平偏移量
                 * offsetTop
                 * 	- 当前元素相对于其定位父元素的垂直偏移量
                 */
                alert(box1.offsetLeft);

                /*
                 * scrollWidth、scrollHeight
                 * 	- 可以获取元素整个滚动区域的宽度和高度
                 */
                //alert(box4.clientHeight);
                //alert(box4.scrollHeight);

                /*
                 * scrollLeft
                 * 	- 可以获取水平滚动条滚动的距离
                 * scrollTop
                 * 	- 可以获取垂直滚动条滚动的距离
                 */
                alert(box4.scrollLeft);
                alert(box4.scrollTop);

                /**
                 * 判断水平垂直滚动条是否滚动到底
                 */
                //alert(box4.clientHeight); // 283
                //当满足scrollHeight - scrollTop == clientHeight
                //说明垂直滚动条滚动到底了

                //当满足scrollWidth - scrollLeft == clientWidth
                //说明水平滚动条滚动到底
                //alert(box4.scrollHeight - box4.scrollTop); // 600
            };
        };
    </script>
</head>
<body id="body">
<button id="btn01">点我一下</button>
<br/><br/>

<div id="box4">
    <div id="box5"></div>
</div>


<br/><br/>

<div id="box3">
    <div id="box2" style="position: relative;">
        <div id="box1"></div>
    </div>
</div>

</body>
</html>
